<template>
    <div>
        <el-dialog :title="titleInfo" :visible.sync="showAddContactsInfo" width="35%" :show-close="false"
                   :close-on-click-modal="false" :close-on-press-escape="false">
            <el-form :model="form" :rules="rules" ref="form" label-width="100px">
                <el-form-item label="姓名" prop="name">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="年龄" prop="age">
                    <el-input v-model.number="form.age"
                              maxlength="3"
                              show-word-limit></el-input>
                </el-form-item>
                <el-form-item label="性别" prop="sex">
                    <el-radio-group v-model="form.sex">
                        <el-radio v-for="sexInfo in sexDateDic" :key="sexInfo.value" :label="sexInfo.value">
                            {{ sexInfo.label }}
                        </el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="身份证" prop="idCard">
                    <el-input v-model="form.idCard"
                              maxlength="20"
                              show-word-limit
                    ></el-input>
                </el-form-item>
                <el-form-item label="电话" prop="phone">
                    <el-input v-model.number="form.phone"
                              maxlength="11"
                              show-word-limit></el-input>
                </el-form-item>
                <el-form-item label="受到感染者" prop="belongArea">
                    <el-cascader v-model="form.belongArea" :options="options" style="width: 100%" filterable>
                        <template slot-scope="{ node, data }">
                            <span>{{ data.label }}</span>
                            <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
                        </template>
                    </el-cascader>
                </el-form-item>
                <el-form-item label="详细地址" prop="address">
                    <el-input v-model="form.address"></el-input>
                </el-form-item>
                <el-form-item label="活动轨迹" prop="trackEvent">
                    <el-input v-model="form.trackEvent"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button v-show="addButtonShow" type="primary" @click="submitForm('form')">立即创建</el-button>
                    <el-button v-show="editButtonShow" type="primary" @click="updateForm('form')">修改</el-button>
                    <el-button v-show="addButtonShow" @click="resetForm('form')">重置</el-button>
                    <el-button @click="closeDetailDialog">关闭</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
import {mapActions} from "vuex";

export default {
    name: "addContactsInfo.vue",
    props: {
        showAddContactsInfo: {type: Boolean, default: false},
        addButtonShow: {type: Boolean, default: false},
        editButtonShow: {type: Boolean, default: false},
        sexDateDic: {type: Array, default: () => []},
        patientStateDic: {type: Array, default: () => []},
        id: {type: String, default: ''},
        titleInfo: {type: String, default: '新增密切接触者信息'},
    },
    data() {
        return {
            dataPatients: [],
            options: [],
            form: {
                id: '',
                name: '',
                age: '',
                sex: '',
                idCard: '',
                phone: '',
                patientInfoId: '',
                belongArea: [],
                address: '',
                trackEvent: '',
            },
            rules: {
                name: [
                    {required: true, message: '请填写姓名', trigger: 'change'}
                ],
                age: [
                    {required: true, message: '年龄不能为空', trigger: 'change'},
                    {type: 'number', message: '年龄必须为数字值', trigger: 'change'}
                ],
                sex: [
                    {required: true, message: '选择性别', trigger: 'change'}
                ],
                idCard: [
                    {required: true, message: '请填写身份证信息', trigger: 'change'},
                    {min: 6, message: '身份证信息请填写完整', trigger: 'change'}
                ],
                phone: [
                    {required: true, message: '请填写联系方式', trigger: 'blur'},
                    {type: 'number', message: '联系方式必须为数字值', trigger: 'change'}

                ],
                trackEvent: [
                    {required: true, message: '请填写活动轨迹', trigger: 'change'}
                ],
                address: [
                    {required: true, message: '请填写居住地址', trigger: 'change'}
                ],
                belongArea: [
                    {required: true, message: '请选择受到感染者所属区域及名称', trigger: 'change'}
                ],
            },
        };
    },
    mounted() {
        this.init()
    },
    watch: {
        showAddContactsInfo: {
            immediate: true,
            handler(newValue, oldValue) {
                if (newValue === true && this.id !== null && this.id !== '' && this.id !== undefined) {
                    this.detailInfo(this.id)
                }
            }
        }
    },
    methods: {
        ...mapActions("contactsInfo", ["addContactsInfo", "contactsInfoDetail","updateContact"]),
        ...mapActions("patientInfo", ["optionTreeInfo"]),
        async init() {
            let resTree = await this.optionTreeInfo();
            this.options = resTree.data
        },
        async detailInfo(id) {
            let res = await this.contactsInfoDetail(id)
            this.form = res.data
            let tempBelongArea = [res.data.belongArea,res.data.patientInfoId]
            this.form.belongArea = tempBelongArea
        },
        updateForm(formInfo) {
            this.$refs[formInfo].validate(async valid => {
                if (valid) {
                    this.form.patientInfoId = this.form.belongArea[1]
                    this.form.belongArea = this.form.belongArea[0]
                    const res = await this.updateContact(this.form)
                    if (res.data === true) {
                        this.$message({
                            message: '密切接触者修改成功',
                            type: 'success'
                        });
                        this.closeAddForm();
                    }
                } else {
                    return false;
                }
            });
        },
        submitForm(formInfo) {
            this.$refs[formInfo].validate(async valid => {
                if (valid) {
                    this.form.patientInfoId = this.form.belongArea[1]
                    this.form.belongArea = this.form.belongArea[0]
                    const res = await this.addContactsInfo(this.form)
                    if (res.data === true) {
                        this.$message({
                            message: '密切接触者添加成功',
                            type: 'success'
                        });
                        this.closeAddForm();
                    }
                } else {
                    return false;
                }
            });
        },
        // 重置
        resetForm(formInfo) {
            if (this.$refs[formInfo] !== undefined) {
                this.$refs[formInfo].resetFields();
            }
        },
        // 新增完毕之后刷新表单
        closeAddForm() {
            this.$emit('refreshTable')
            this.resetForm('form')
            this.closeInfoDialog()
        },
        // 关闭dialog
        closeDetailDialog() {
            this.resetForm('form')
            this.closeInfoDialog()
        },
        // 关闭dialog所做的操作
        closeInfoDialog() {
            this.$emit('update:addButtonShow', false)
            this.$emit('update:editButtonShow', false)
            this.$emit('update:id', null)
            this.$emit('update:showAddContactsInfo', false)
            this.$emit('update:titleInfo', '新增密切接触者信息')
        }
    }
}
</script>

<style scoped>

</style>
